<template>
  <div class="customer-lable wap">
    <x-header v-if="!this.$fromApp(this)" class="vux-1px-b whiteTheme" :left-options="{backText: ''}"><span>客户标签</span>
    </x-header>
    <div class="main add-content">
      <scroller>
        <TagsInput :tags='lables' @inputDelete="inputDelete"></TagsInput>
        <div class="btn-comfirm-container" @click="submitData()">
          <div class="btn-comfirm  display-flex align-items-center justify-content-flex-center"><span>确定</span></div>
        </div>

        <div>
          <div class="tip">已有自定义标签</div>
        </div>
        <div class="display-flex lable-content flex-wrap-wrap">
          <div @click="selectLable(itemLable,index)"
               :class="['lable-normal justify-content-flex-center display-flex align-items-center',itemLable.select?'lable-select':'']"
               v-for="(itemLable,index) in totalLables" :key="index">
            <span> {{itemLable.name}}</span>
            <img @click.stop="removeLable(itemLable,index,$event)" class="close-lable"
                 src="../../assets/img/customer/close_popup.png">
          </div>

        </div>

      </scroller>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import TagsInput from '../../components/TagsInput'

  export default {
    components: {
      TagsInput
    },
    data() {
      return {
        lables: [],
        totalLables: [],
        customerId: ""

      }
    },
    created() {
      this.customerId = this.$route.query.customerId;
      this.getLableTip(this.customerId);

    },
    methods: {
      removeLable(item, index) {
        console.log("====item",item);
        let that=this;
        this.$vux.confirm.show({
          title: '提示',
          content: '确定删除该标签?',
          onConfirm () {
            that.$ajax.get("customer/tip/delete", (res) => {
              if (res.code == 200) {
                that.totalLables.splice(index,1);
                for (let i = 0; i < that.lables.length; i++) {
                  if (that.lables[i].id == item.id) {
                    that.lables.splice(i, 1)
                    that.$callJava({
                      deleteItem:item,
                      code: 1017,
                      localRefresh: true,
                      LableList: that.lables,
                      buyerId: that.customerId,
                      fromAddLable: true,
                      noBack:true
                    })
                    break;
                  }
                }
              }else{
                that.$vux.toast.text(res.msg, 'center');
              }
            },{customerTipId: item.id})
          }
        })
      },
      inputDelete(e) {
        for (let i = 0; i < this.totalLables.length; i++) {
          if (this.totalLables[i].name == e) {
            this.totalLables[i].select = false;
            console.log("====", this.totalLables[i]);
            this.$set(this.totalLables, i, this.totalLables[i]);
            break
          }

        }
      },
      selectLable(item, index) {
        item.select = !item.select;
        let obj = {};
        let flag = false;
        if (item.select) {
          for (let i = 0; i < this.lables.length; i++) {
            if (this.lables[i].name == item.name) {
              flag = true;
              break;
            }
          }
          if (!flag) {
            obj.name = item.name;
            obj.id = item.id;
            this.lables.push(obj)
          }
        } else {
          for (let i = 0; i < this.lables.length; i++) {
            if (this.lables[i].name == item.name) {
              obj.name = item.name;
              obj.id = item.id;
              this.lables.splice(i, 1)
              break;
            }
          }
        }
        this.$set(this.totalLables, index, item);

      },
      submitData() {
        console.log("===obj1", this.lables);
        for (let i = 0; i < this.lables.length; i++) {
          for (let j = 0; j < this.totalLables.length; j++) {
            if (this.lables[i].name.trim() == this.totalLables[j].name) {
              this.lables[i].name = this.totalLables[j].name;
              this.lables[i].id = this.totalLables[j].id;
              this.lables[i].sellerId = this.totalLables[j].id;
              break;
            }else{
                delete  this.lables[i]["id"];
                delete  this.lables[i]["sellerId"];
            }
          }
        }
        let obj = {
          "buyerId": this.customerId,
          "list": this.lables
        };
        console.log("===obj2", obj);
        this.$ajax.post("customer/tip/bind", obj, (res) => {
          if (res.code == 200) {
            this.$vux.toast.text("新增成功", 'center');
            if (this.$fromApp(this)) {
              this.$callJava({
                code: 1017,
                localRefresh: true,
                LableList: this.lables,
                buyerId: this.customerId,
                fromAddLable: true
              })
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, 1)
      },
      getLableTip(id) {
        let obj = {};
        if (id) {
          obj.buyerId = id;
        }
        this.$ajax.get("customer/tip/list", (res) => {
          console.log("====label", res);
          if (res.code == 200) {
            if (id) {
              this.lables = res.data;
              this.getLableTip();
            } else {
              for (let i = 0; i < res.data.length; i++) {
                for (let j = 0; j < this.lables.length; j++) {
                  if (res.data[i].name == this.lables[j].name) {
                    res.data[i].select = true;
                  }
                }
              }
              this.totalLables = res.data;
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, obj);//不传id表示获取卖家所有的标签
      },
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .customer-lable {
    background: #fff;
    .close-lable {
      right: -0.15rem;
      top: -0.15rem;
      z-index: 999;
      position: absolute;
      width: .3rem;
      height: .3rem;
    }
    .lable-input {
      margin: .3rem;
      background: #f6f6f6;
      padding: .2rem;
      min-height: 2.1rem;
      font-size: .26rem;
    }
    .btn-comfirm {
      font-size: .34rem;
      font-weight: 500;
      color: #fff;
      height: .84rem;
      background: rgba(82, 125, 217, 1);
      border-radius: .42rem;
      margin: 0 .3rem 1.6rem .3rem;
    }
    .tip {
      color: #333;
      font-size: .3rem;
      margin-left: .3rem;
    }
    .lable-content {
      margin: .4rem .4rem .2rem .4rem;
    }
    .lable-normal {
      min-width: 1rem;
      position: relative;
      margin-bottom: .25rem;
      border-radius: .06rem;
      border: 1px solid #F4F4F4;
      font-size: .24rem;
      color: #222;
      background: #F4F4F4;
      padding: .08rem .23rem;
      margin-right: .2rem;
    }
    .lable-select {
      border-radius: .06rem;
      border: 1px solid #F4F4F4;
      font-size: .24rem;
      color: #FF9700;
      background: #FFF4E4;
      padding: .08rem .23rem;
      margin-right: .2rem;
      margin-bottom: .25rem;
    }
  }
</style>
